<template>
  <el-dialog
    v-model="createVisible"
    :title="operation == 'create' ? '添加商品标签' : '编辑商品标签'"
    @before-ok="createOk"
    @close="close(createRef)"
    width="500px"
    top="100px"
  >
    <div style="width: 400px">
      <el-form
        :model="createForm"
        ref="createRef"
        :rules="createRules"
        label-width="110px"
        size="default"
        v-loading="initLoading"
      >
        <el-form-item label="标签名称：" prop="label_name">
          <el-input
            v-model="createForm.label_name"
            placeholder="请输入标签名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="标签组：" prop="group_id">
          <el-select v-model="createForm.group_id" class="form-select-fil">
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.group_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="flex center">
        <el-button @click="close(createRef)">取消</el-button>
        <el-button
          type="primary"
          :loading="btnLoading"
          :disabled="btnLoading"
          @click="createOk(createRef)"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
  
  <script lang="ts">
export default {
  name: "createGoodsLabelCreate",
};
</script>
  <script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, reactive, onMounted } from "vue";
import type { FormInstance } from "element-plus";
import {
  createGoodsLabel,
  updateGoodsLabel,
  getGoodsLabelDetail,
  getGoodsLabelGroupList
} from "@/api/store/goods_label";
import type { Result, ResultError } from "@/types";

const {
  proxy: { $message, $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["success"]);

const createVisible = ref<boolean>(false);

const operation = ref<string>("create");

const operationId = ref<number>(0);

const createRef = ref<typeof FormInstance>();

const btnLoading = ref<boolean>(false);

const parentTree = ref<any>([]);

const initLoading = ref<boolean>(true);

const groupList = ref<any>();

const toGroupInit = () => {
  let obj: any = {};
  initLoading.value = true;
  getGoodsLabelGroupList()
    .then((res: Result) => {
        groupList.value = res.data;
        initLoading.value = false;
    })
    .catch((err: ResultError) => {
      initLoading.value = false;
      $utils.errorMsg(err);
    });
};

const createForm = ref<any>({
  label_name: "",
  group_id: null,
});
const createRules: any = reactive({
  label_name: [{ required: true, message: "标签名称不能为空！" }],
});

const createOk = async (formEl: typeof FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (btnLoading.value) {
        return;
      }
      btnLoading.value = true;
      let operationApi: any = null;
      if (operation.value == "create") {
        operationApi = createGoodsLabel(createForm.value);
      } else {
        operationApi = updateGoodsLabel(
          Object.assign(
            {
              id: operationId.value,
            },
            createForm.value
          )
        );
      }
      operationApi
        .then((res: Result) => {
          $message.success(res.message);
          close(formEl);
          emit("success");
          btnLoading.value = false;
        })
        .catch((err: ResultError) => {
          $utils.errorMsg(err);
          btnLoading.value = false;
        });
    }
  });
};

const open = (id: number = 0,label:string = '',group:number) => {
  toGroupInit();
  if (id != 0) {
    operation.value = "update";
    operationId.value = id;
    createForm.value.label_name = label
    createForm.value.group_id = group != 0 ? group : null
  } else {
    operation.value = "create";
  }
  createVisible.value = true;
};

const close = async (formEl: typeof FormInstance | undefined) => {
  if (formEl) {
    formEl.resetFields();
  }
  operationId.value = 0;
  createVisible.value = false;
};

defineExpose({ open });
</script>